﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <nav>
            <div>
                <a href="javascript:;">第1个A标签</a>
            </div>
            <ul>
                <li id="ele1">
                    <span>请使用开发者工具的控制台查看运行结果</span>
                </li>
                <li>
                    <a href="javascript:;">
                        第2个A标签
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <script>

        var style = 'color:#f00;font-size:1.2em;';

        // 一、number 类型数据的转换：隐式的转换、Number（隐式转换使用的就是Number）、parseInt、parseFloat
        // 1、Number 转换
        // 规则，只能转换数字类型字面量的字符串 : '0','100.58','0xA3','0b1011' 等
        // 如果包含了非数字类型的字面量，则会出现转换的结果为：NaN
        console.log('%cNumber：字符串内容是一个整数字面量或者是16进制的情况：', style);
        console.log('数字字符串 Number("248") = ' + Number('248'));
        console.log('数字字符串 Number("056") = ' + Number('056'));
        console.log('16进制字符串 Number("0xF3") = ' + Number('0xF3'));
        console.log('二进制字符串 Number("0b1011") = ' + Number('0b1011')); // 这个要注意，如果是使用Number 函数，则是可以正确识别的
        console.log('八进制字符串 Number("0o7043") = ' + Number('0o7043')); // 这个要注意，如果是使用Number 函数，则是可以正确识别的

        console.log('%cNumber：小数字面量的情况：', style);
        console.log('前导数字字符串 Number("248.25") = ' + Number('248.25'));
        console.log('前导数字字符串 Number("248.10") = ' + Number('248.10'));
        console.log('前导数字字符串 Number("248.00") = ' + Number('248.00'));
        console.log('前导数字字符串 Number(".25") = ' + Number('.25'));
        console.log('前导数字字符串 Number("0.00") = ' + Number('0.00'));

        console.log('%cNumber：前导内容是数字面量的情况：', style);
        console.log('前导数字字符串 Number("248.25.123456") = ' + Number('248.25.123456'));
        console.log('前导数字字符串 Number("12个桔子") = ' + Number('12个桔子'));  // NaN
        console.log('前导数字字符串 Number("15个桔子里有10个烂了") = ' + Number('15个桔子里有10个烂了'));
        console.log('前导数字字符串 Number("12.58元") = ' + Number('12.58元'));
        console.log('前导数字字符串 Number("0xFF这个16进制是多少呢") = ' + Number('0xFF这个16进制是多少呢'));

        console.log('%cNumber：其它进制字符串直接转换：', style); // # ff 00 00  R G B
        console.log('16进制字符串 Number("F3") = ' + Number('F3'));

        console.log('%cNumber：其它类型转换：', style);
        console.log('空字符串 Number("") = ' + Number(''));
        console.log('布尔值 Number(true) = ' + Number(true));
        console.log('布尔值 Number(false) = ' + Number(false));
        console.log('Number(null) = ' + Number(null));
        console.log('Number(undefined) = ' + Number(undefined));

        console.log('%c========== ========== ========== ========== ========== ========== ========== ==========', 'color:#00f;');

        // 2、parseInt 转换
        // 比隐式转换强势一些，包含了Number可以转换的数据，另外再加上 以数字开头的数据也是可以转换的。
        // 字符串里的字符如果是数字字面量（不识别小数点，但是能识别16进制字符串），直接转换成数字
        // 如果只是开头的若干个字符是字面量，则只转换开头的部分
        console.log('%cparseInt：字符串内容是一个整数字面量或者是16进制的情况：', style);
        console.log('数字字符串parseInt("248") = ' + parseInt('248'));
        console.log('16进制字符串 parseInt("0xF3") = ' + parseInt('0xF3'));

        console.log('%cparseInt：字符串内容是其它进制的情况则不能转换只能识别前导的数字字符0：', style);
        console.log('二进制字符串 parseInt("0b1011") = ' + parseInt('0b1011')); // 这个要注意，如果是使用Number 函数，则是可以正确识别的
        console.log('八进制字符串 parseInt("0o7043") = ' + parseInt('0o7043')); // 这个要注意，如果是使用Number 函数，则是可以正确识别的

        console.log('%cparseInt：字符串内的前导内容是一个整数字面量的情况：', style);
        console.log('前导数字字符串 "248.25" 的 parseInt("248.25") = ' + parseInt('248.25'));
        console.log('前导数字字符串 parseInt("12个桔子") = ' + parseInt('12个桔子'));
        console.log('前导数字字符串 parseInt("15个桔子里有10个烂了") = ' + parseInt('15个桔子里有10个烂了'));
        console.log('前导数字字符串 parseInt("12.58元") = ' + parseInt('12.58元'));
        console.log('前导数字字符串 parseInt("0xFF这个16进制是多少呢") = ' + parseInt('0xFF这个16进制是多少呢'));

        console.log('%cparseInt：其它进制字符串直接转换：', style);
        console.log('16进制字符串 parseInt("F3") = ' + parseInt('F3'));
        console.log('二进制字符串 parseInt("1101") = ' + parseInt('1101'));
        console.log('八进制字符串 parseInt("7043") = ' + parseInt('7043'));

        console.log('%cparseInt：其它进制字符串加上第二参数（进制）转换：', style);
        console.log('16进制字符串 parseInt("F3",16) = ' + parseInt('F3', 16));
        console.log('二进制字符串 parseInt("1101",2) = ' + parseInt('1101', 2));
        console.log('八进制字符串 parseInt("7043",8) = ' + parseInt('7043', 8));

        console.log('%cparseInt：其它类型转换：', style);
        console.log('空字符串 parseInt("") = ' + parseInt(''));
        console.log('布尔值 parseInt(true) = ' + parseInt(true));
        console.log('布尔值 parseInt(false) = ' + parseInt(false));
        console.log('parseInt(null) = ' + parseInt(null));
        console.log('parseInt(undefined) = ' + parseInt(undefined));

        console.log('%c========== ========== ========== ========== ========== ========== ========== ==========', 'color:#00f;');

        // 3、parseFloat 转换
        // 和 parseInt 的转换规则相同。
        // 字符串里的字符如果是数字（识别小数点，但是不能识别进制字符串）字面量，直接转换成数字
        // 如果只是开头的若干个字符是字面量，则只转换开头的部分
        console.log('%cparseFloat：字符串内容是一个整数字面量的情况：', style);
        console.log('数字字符串 parseFloat("248.25") = ' + parseFloat('248.25'));
        console.log('数字字符串 parseFloat("248.10") = ' + parseFloat('248.10'));
        console.log('数字字符串 parseFloat("248.00") = ' + parseFloat('248.00'));
        console.log('数字字符串 parseFloat("0.25") = ' + parseFloat('0.25'));
        console.log('数字字符串 parseFloat("0.00") = ' + parseFloat('0.00'));
        console.log('数字字符串 parseFloat(".38") = ' + parseFloat('.38'));

        console.log('%cparseFloat：字符串内的前导内容是一个整数字面量的情况：', style);
        console.log('前导数字字符串 parseFloat("248.25.123456") = ' + parseFloat('248.25.123456'));

        console.log('前导数字字符串 parseFloat("12.1斤桔子") = ' + parseFloat('12.1斤桔子'));
        console.log('前导数字字符串 parseFloat("15.5斤桔子里有10个烂了") = ' + parseFloat('15.5斤桔子里有10个烂了'));
        console.log('前导数字字符串 parseFloat("12.58元") = ' + parseFloat('12.58元'));

        console.log('%cparseFloat：其它进制字符串加上第二参数（进制）转换：', style);
        console.log('16进制字符串 parseFloat("F3",16) = ' + parseFloat('F3', 16));
        console.log('二进制字符串 parseFloat("1101",2) = ' + parseFloat('1101', 2));
        console.log('八进制字符串 parseFloat("7043",8) = ' + parseFloat('7043', 8));

        console.log('%cparseFloat：其它类型转换：', style);
        console.log('空字符串 parseFloat("") = ' + parseFloat(''));
        console.log('布尔值 parseFloat(true) = ' + parseFloat(true));
        console.log('布尔值 parseFloat(false) = ' + parseFloat(false));
        console.log('parseFloat(null) = ' + parseFloat(null));
        console.log('parseFloat(undefined) = ' + parseFloat(undefined));
        console.log('%c========== ========== ========== ========== ========== ========== ========== ==========', 'color:#00f;');

        // 二：字符串类型及操作
        console.log('%c字符串的拼接操作：', style);
        console.log('字符串拼接 "Hello" + "World" = ' + ('Hello' + 'World'));
        console.log('字符串拼接 "Hello" + 100 = ' + ('Hello' + 100));
        console.log('字符串拼接 "Hello" + 100.35 = ' + ('Hello' + 100.35));
        console.log('字符串拼接 "Hello" + true = ' + ('Hello' + true));
        console.log('字符串拼接 "Hello" + null = ' + ('Hello' + null));
        console.log('字符串拼接 "Hello" + undefined = ' + ('Hello' + undefined));

        console.log('%c字符串的隐式转换：', style);
        console.log('数字 100：' + 100);
        console.log('数字 100.35：' + 100.35);
        console.log('布尔值 true：' + true);
        console.log('布尔值 false：' + false);
        console.log('null：' + null);
        console.log('undefined：' + undefined);

        console.log('%c字符串的 String() 转换（隐式转换的实质就是使用的 String 函数进行的转换）：', style);
        console.log('数字 100：' + String(100));
        console.log('数字 100.35：' + String(100.35));
        console.log('布尔值 true：' + String(true));
        console.log('布尔值 false：' + String(false));
        console.log('null：' + String(null));
        console.log('undefined：' + String(undefined));

        // 对象转字符串，这个我们再后面讲对象的时候再详细的去讲解
        console.log('%c对象转字符串（ String 参数为对象的时候），优先调用 valueOf 方法转换，如果没有valueOf，则调用对象的 toString 方法：', style);
        var obj1 = {
            x: 100,
            valueOf: function () {
                return '我是 valueOf 返回的字符串';
            },
            toString: function () {
                return '我是 toString 返回的字符串';
            }
        };
        var obj2 = {
            x: 100,
            toString: function () {
                return '我是 toString 返回的字符串';
            }
        };
        var obj3 = {
            x: 100
        };

        console.log('隐式转换（有 valueOf，有 toString）：obj1 = ' + String(obj1));
        console.log('隐式转换（无 valueOf，有 toString）：obj2 = ' + String(obj2));
        console.log('隐式转换（无 valueOf，无 toString）：obj3 = ' + String(+obj3));




        console.log('%c========== ========== ========== ========== ========== ========== ========== ==========', 'color:#00f;');

        // 三：DOM 操作

        // 1、通过 document.getElementById 获取一个节点，节点的id通常来说必须在文档中是唯一的
        // 2、通过 document.querySelector 获取一个节点，使用选择器来选择节点 选择器的选择方式 和 css 选择器相同
        var e1 = document.getElementById('ele1'); // Element
        var e2 = document.querySelector('li>a');

        // 3、节点的样式操作
        // Element.style.css属性名，当css属性名里包含了“-”时候，去掉“-”并将它后面的一个字符转换为大写
        // 注意：此操作是动态的更改 element 对象的 style 属性
        e1.style.color = '#f00';
        e1.style.fontSize = '48px';

        e2.style.backgroundColor = '#f00';
        e2.style.color = '#fff';
        e2.style.fontSize = '32px';

    </script>


</body>
</html>